<template>
  <view class="content">
    <view class="item" v-for="item, i in list" :key="i" @click="
      handleTabs(
        item.url
      )
      ">
      <view class="left">
        <image :src="Domain_ICON + item.icon" mode=""></image>
      </view>
      <view class="right">
        <view class="title">{{ item.name }}</view>
        <view class="cont">{{ item.cont }}</view>
      </view>
    </view>
  </view>
</template>

<script>
const app = getApp();
export default {
  data() {
    return {
      Domain_ICON: app.globalData.Domain_ICON,
      list: [
        {
          name: "认证服务",
          cont: "我们为您提供专业的认证服务，确保您的产品或服务符合相关的标准和法规要求。我们的认证流程严格合规，通过我们的认证，您可以证明您的产品或服务的质量和合法性，增强消费者对您的信任。",
          icon: "/4.png",
          url: "/pages/index/OthercertificationsItem?title=认证服务&index=0"
        },
        {
          name: "商标设计",
          cont: "我们的商标服务帮助您注册和保护您的商标，确保您在市场上建立起独特的品牌形象。我们的专业团队将协助您完成商标注册流程，保护您的商标不受侵权，并提供维权服务，确保您的品牌价值得到充分保护。",
          icon: "/1.png",
          url: "/pages/index/OthercertificationsItem?title=商标设计&index=1"
        },
        {
          name: "检测服务",
          cont: "我们提供食品检测服务，帮助您确保食品的质量和安全性。我们的实验室设备和技术先进，能够进行微生物检测、化学成分分析以及食品营养价值评估等服务。通过我们的检测，您可以获得关于食品中可能存在的问题或潜在风险的准确信息，以便您做出相应的调整和改进。",
          icon: "/3.png",
          url: "/pages/index/OthercertificationsItem?title=商标设计&index=2"
        },
        {
          name: "网页设计",
          cont: "我们提供创意设计服务，帮助您打造与众不同的品牌形象和用户体验。我们的设计团队拥有丰富的经验和创造力，能够为您提供优质的视觉设计、平面设计、UI",
          icon: "/2.png",
          url: "/pages/index/OthercertificationsItem?title=商标设计&index=3"
        }
      ]
    };
  },
  methods: {
    handleTabs(url) {
      uni.navigateTo({
        url,
      });
    },
  },
};
</script>

<style lang="scss" scoped>
.content {
  height: calc(100vh - 0px);
  padding: 20rpx;
  box-sizing: border-box;
  background-color: #f5f5f5;

  .item {
    border-radius: 20rpx;
    background-color: #fff;
    padding: 20rpx;
    box-sizing: border-box;
    display: flex;
    align-items: center;
    margin: 0 0 30rpx 0;

    .title {
      font-size: 40rpx;
      font-weight: bold;
      margin: 10rpx 0;
    }

    .cont {
      font-size: 24rpx;
    }
  }

  .left {
    image {
      width: 100rpx;
      height: 100rpx;
    }
  }

  .right {
    margin: 0 0 0 20rpx;
  }
}
</style>
